<template>
  <header class="bg-gradient-to-r from-indigo-500 to-purple-600 rounded-xl text-white p-8 mb-8">
    <div class="flex justify-between items-center">
      <div class="space-y-2">
        <h1 class="text-4xl font-bold">{{ title }}</h1>
        <p class="text-lg opacity-90">{{ subtitle }}</p>
      </div>
      <button 
        class="flex items-center gap-2 px-6 py-3 bg-white bg-opacity-20 border-2 border-white border-opacity-30 rounded-lg text-white font-semibold hover:bg-opacity-30 hover:border-opacity-50 hover:-translate-y-0.5 transition-all duration-300"
        @click="$emit('back')"
      >
        <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/>
        </svg>
        {{ backText }}
      </button>
    </div>
  </header>
</template>

<script setup lang="ts">
interface Props {
  title: string
  subtitle: string
  backText: string
}

interface Emits {
  (e: 'back'): void
}

defineProps<Props>()
defineEmits<Emits>()
</script>
